<!--结账页面-->
<template>
<div class="main">
    <div class="left">
        <div class="projectname">
            {{$t("collectmoney.project.title")}}
        </div>
        <div class="project" v-loading="listLoading">
            <div class="projectitem" v-for="item in shopProjects" @click="addShopCart(item)" :key="item.id">
                <template v-if="item.id!=''">{{item.projectName}}<br />${{item.price}}</template>
            </div>
        </div>
        <div class="projectbar">
            <div>
                <el-button class="button" icon="el-icon-arrow-up" @click="pageEvent(-1)" type="primary">&nbsp;&nbsp;{{$t("collectmoney.project.bars.pageup")}}&nbsp;&nbsp;</el-button>
            </div>
            <div>
                <el-button class="button" icon="el-icon-arrow-down" @click="pageEvent(1)" type="primary">&nbsp;&nbsp;{{$t("collectmoney.project.bars.pagedown")}}&nbsp;&nbsp;</el-button>
            </div>
            <div>
                <el-button class="button" icon="el-icon-back" type="primary" @click="showMainPage">&nbsp;&nbsp;{{$t("collectmoney.project.bars.returnBtnName")}}&nbsp;&nbsp;</el-button>
            </div>
        </div>
    </div>

    <div class="right">
        <div class="checkoutname">
            {{$t("collectmoney.checkout.title")}}
        </div>
        <div>
            <el-table :data="shopCartList" highlight-current-row :height="tableHeight" stripe border>
                <el-table-column prop="projectName" :label="$t('collectmoney.checkout.table.projectname')" min-width="200">
                </el-table-column>
                <el-table-column prop="num" :label="$t('collectmoney.checkout.table.projectnum')" min-width="80">
                </el-table-column>
                <el-table-column prop="price" :label="$t('collectmoney.checkout.table.projectmoney')" min-width="80">
                </el-table-column>
                <el-table-column :label="$t('collectmoney.checkout.table.operation')" width="80">
                    <template scope="scope">
                        <el-button type="success" icon="edit" size="small" @click="delShopCartItem(scope.$index, scope.row)">{{$t("collectmoney.checkout.table.delete")}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="checkoutbar">
            <div style="cursor: pointer;" @click="choicePayway(1)"><i v-if="payway==1" class="el-icon-check"></i> {{$t("collectmoney.checkout.bars.cash")}}</div>
            <div style="cursor: pointer;" @click="choicePayway(2)"><i v-if="payway==2" class="el-icon-check"></i> {{$t("collectmoney.checkout.bars.creditCard")}}</div>
            <div style="cursor: pointer;" @click="choicePayway(3)"><i v-if="payway==3" class="el-icon-check"></i> {{$t("collectmoney.checkout.bars.giftCard")}}</div>
            <div>{{$t("collectmoney.checkout.bars.total")}}:${{shopCartPrice}}</div>
            <div style="cursor: pointer;" @click="invokeShowStaffPage">{{$t("collectmoney.checkout.bars.staffName")}}:{{workStaff.realName}}</div>
            <div>
                <el-button class="button" icon="el-icon-check" type="primary" @click="saveOrderEvent">&nbsp;&nbsp;{{$t("collectmoney.checkout.bars.okBtnName")}}&nbsp;&nbsp;</el-button>
            </div>
        </div>
    </div>
    <el-dialog :title="$t('collectmoney.dialog.choiceStaff.title')" :visible.sync="pageVisible" :close-on-click-modal="false" width="300">
        <choiceStaff ref="choiceStaff" @click="selectStaff" :checkAuth="true"></choiceStaff>
    </el-dialog>
    <checkoutGiftcard ref="checkoutGiftcard"></checkoutGiftcard>
</div>
</template>

<script>
import util from '../../common/js/util';
import ChoiceStaff from '../../components/choiceStaff.vue';
import CheckoutGiftcard from './checkoutGiftcard.vue';
import jwt_decode from 'jwt-decode';
import {
    getProjects,
    addOrder
} from '../../api/api';
import {
    getLodop
} from '../../common/js/LodopFuncs';
export default {
    components: {
        choiceStaff: ChoiceStaff,
        checkoutGiftcard: CheckoutGiftcard
    },
    data() {
        return {
            listLoading: false,
            pageCount: 0, //总页数
            pageSize: 12, //每页条数
            currentPage: 1, //当前页码
            pageVisible: false,
            shopProjects: [], //项目列表
            shopCartList: [], //购物车列表
            shopCartPrice: 0, //购物车总价格
            tableHeight: window.innerHeight - 160,
            workStaff: {},
            invokeShowStaffPageEnabled: true,
            payway: 0 //支付方式
        };
    },
    mounted() {
        if (sessionStorage.getItem('userToken') != null) {
            var userToken = jwt_decode(sessionStorage.getItem("userToken"));
            if (userToken.roleId != 3) {
                this.workStaff.realName = userToken.staffName;
                this.workStaff.id = userToken.userid;
                if (userToken.roleId == 1) {
                    this.invokeShowStaffPageEnabled = false;
                }
            }
        }
        this.getShopProjects();
    },
    methods: {
        showMainPage() {
            this.$router.push({
                path: '/home'
            });
        },
        invokeShowStaffPage() {
            //显示选择员工页面
            if (this.invokeShowStaffPageEnabled) {
                this.pageVisible = true;
            }
        },
        selectStaff(user) {
            this.workStaff = user;
            this.pageVisible = false;
        },
        choicePayway(payway) {
            if (payway == 3) {
                if (Object.keys(this.workStaff).length == 0) {
                    this.$message({
                        message: this.$t('collectmoney.checkout.bars.validMsg.choiceStaff'),
                        type: 'warning'
                    });
                    return;
                }
                if (this.shopCartPrice == 0 || this.shopCartList.length == 0) {
                    this.$message({
                        message: this.$t('collectmoney.checkout.bars.validMsg.choiceServiceItem'),
                        type: 'warning'
                    });
                    return;
                }
                this.payway = payway;
                this.$refs.checkoutGiftcard.checkoutForm.orderPrice = this.shopCartPrice;
                let para = {
                    staffId: this.workStaff.id,
                    totalPrice: this.shopCartPrice,
                    payRecords: [],
                    buyProjects: []
                };

                for (let i = 0; i < this.shopCartList.length; i++) {
                    let obj = this.shopCartList[i];
                    let buyProject = {};
                    buyProject.projectId = obj.id;
                    buyProject.projectNum = obj.num;
                    para.buyProjects.push(buyProject);
                }

                // let payRecord = {};
                // payRecord.payWay = this.payway;
                // payRecord.payMoney = this.shopCartPrice;
                // para.payRecords.push(payRecord);

                this.$refs.checkoutGiftcard.showPage(para);
                return;
            }
            this.payway = payway;
        },
        getShopProjects() {
            let para = {
                pageSize: this.pageSize,
                pageNum: this.currentPage
            };
            this.listLoading = true;
            getProjects(para).then(res => {
                let {
                    msg,
                    code
                } = res;
                if (code !== "0") {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                } else {
                    this.pageCount = res.data.pages;
                    this.shopProjects = res.data.list;
                    var fillEmptyProjectNum = this.pageSize - res.data.list.length;
                    for (var i = 0; i < fillEmptyProjectNum; i++) {
                        this.shopProjects.push({
                            "id": "",
                            "projectName": "",
                            "price": ""
                        });
                    }
                    this.listLoading = false;
                }
            });
        },
        addShopCart(i_projectItem) {
            var projectItem = Object.assign({}, i_projectItem);
            if (projectItem.id != '') {
                this.shopCartPrice = util.math.add(this.shopCartPrice, projectItem.price);
                for (var i = 0; i < this.shopCartList.length; i++) {
                    if (this.shopCartList[i].id == projectItem.id) {
                        this.shopCartList[i].num++;
                        this.shopCartList[i].price = util.math.add(this.shopCartList[i].price, projectItem.price);
                        projectItem.num = this.shopCartList[i].num;
                        projectItem.price = this.shopCartList[i].price;
                        this.shopCartList.splice(i, 1, projectItem);
                        return;
                    }
                }
                projectItem.num = 1;
                this.shopCartList.push(projectItem);
            }
        },
        delShopCartItem(index, row) {
            for (let i = 0; i < this.shopCartList.length; i++) {
                let obj = this.shopCartList[i];
                if (obj == row) {
                    this.shopCartList.splice(i, 1);
                    this.shopCartPrice = util.math.sub(this.shopCartPrice, obj.price);
                    i--;
                }
            }
        },
        pageEvent(changeNum) {
            var tmpPage = this.currentPage + changeNum;
            if ((tmpPage == 0) || (tmpPage > this.pageCount)) {
                return;
            }
            this.currentPage = this.currentPage + changeNum;
            this.getShopProjects();
        },
        saveOrderEvent() {
            //JSON.stringify(evtValue)=='{}'
            if (Object.keys(this.workStaff).length == 0) {
                this.$message({
                    message: this.$t('collectmoney.checkout.bars.validMsg.choiceStaff'),
                    type: 'warning'
                });
                return;
            }
            if (this.shopCartPrice == 0 || this.shopCartList.length == 0) {
                this.$message({
                    message: this.$t('collectmoney.checkout.bars.validMsg.choiceServiceItem'),
                    type: 'warning'
                });
                return;
            }
            if (this.payway == 0) {
                this.$message({
                    message: this.$t('collectmoney.checkout.bars.validMsg.choicePayway'),
                    type: 'warning'
                });
                return;
            }

            let para = {
                staffId: this.workStaff.id,
                totalPrice: this.shopCartPrice,
                payRecords: [],
                buyProjects: []
            };

            for (let i = 0; i < this.shopCartList.length; i++) {
                let obj = this.shopCartList[i];
                let buyProject = {};
                buyProject.projectId = obj.id;
                buyProject.projectNum = obj.num;
                para.buyProjects.push(buyProject);
            }
            let payRecord = {};
            payRecord.payWay = this.payway;
            payRecord.payMoney = this.shopCartPrice;
            para.payRecords.push(payRecord);

            addOrder(para).then(res => {
                let {
                    msg,
                    code
                } = res;
                if (code !== "0") {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                } else {
                    //拿到返回的数据解析
                    try {
                        //热敏小票打印
                        let LODOP = getLodop(); //调用getLodop获取LODOP对象
                        if (typeof (LODOP) != "undefined") {
                            var initContentTop = 50; //初始化打印主内容的TOP高度
                            var lineHeight = 20; //每行的高度
                            var dateStr = util.formatDate.format(new Date(), 'MM-dd-yyyy'); //美国国家标准时间格式(月日年)
                            var timeStr = util.formatDate.format(new Date(), 'hh:mm:ss');
                            //#######结账-订单-打印小票##########
                            LODOP.PRINT_INITA(0, 0, 580, 793, "打印订单小票");
                            LODOP.SET_PRINT_PAGESIZE(1, 580, 1400, ""); //设置打印页大小(横向或纵向,宽度和高度)
                            LODOP.SET_PRINT_MODE("PRINT_NOCOLLATE", 1);
                            LODOP.ADD_PRINT_HTM(8, 0, "100%", "100%", "<div align=\"center\" style=\"font-weight:bold;\">" + res.data.shop.shopName + "</div>");
                            LODOP.ADD_PRINT_LINE(40, -7, 40, 377, 4, 0);
                            LODOP.ADD_PRINT_HTM(initContentTop, 0, "100%", "100%", "<div style=\"font-size:11px;\">" + this.$t('collectmoney.print.orderNo') + res.data.orderNum + "</div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * 1, 0, "100%", "100%", "<div style=\"font-size:11px;\"><div style=\"float:left;\">" + this.$t('collectmoney.print.checkoutStaff') + res.data.checkoutUserName + "</div><div style=\"float:right;\">" + this.$t('collectmoney.print.serviceStaff') + res.data.serviceStaffName + "</div></div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * 2, 0, "100%", "100%", "<div style=\"font-size:11px;\"><div style=\"float:left;\">" + this.$t("collectmoney.print.date") + dateStr + "</div><div style=\"float:right;\">" + this.$t("collectmoney.print.time") + timeStr + "</div></div>");
                            LODOP.ADD_PRINT_LINE(initContentTop + lineHeight * 3, -7, initContentTop + lineHeight * 3, 377, 4, 0);
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * 4, 0, "100%", "100%", "<ul style=\"font-size:11px;list-style:none;font-weight:bold;margin:0;padding:0;\"><li style=\"list-style:none;float:left;width:40%;text-align:left;\">" + this.$t('collectmoney.print.projectName') + "</li><li style=\"list-style:none;float:left;width:20%;text-align:right;\">" + this.$t('collectmoney.print.projectPrice') + "</li><li style=\"list-style:none;float:left;width:20%;text-align:right;\">" + this.$t('collectmoney.print.projectNumber') + "</li><li style=\"list-style:none;float:left;width:20%;text-align:right;\">" + this.$t('collectmoney.print.projectMoney') + "</li></ul>");
                            let projectTypeNum = this.shopCartList.length;
                            let projectNumber = 0;
                            for (let i = 0; i < projectTypeNum; i++) {
                                let obj = this.shopCartList[i];
                                projectNumber = projectNumber + obj.num;
                                LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (5 + i), 0, "100%", "100%", "<ul style=\"font-size:11px;list-style:none;margin:0;padding:0;\"><li style=\"list-style:none;float:left;width:40%;text-align:left;\">" + obj.projectName + "</li><li style=\"list-style:none;float:left;width:20%;text-align:right;\">" + obj.price + "</li><li style=\"list-style:none;float:left;width:20%;text-align:right;\">" + obj.num + "</li><li style=\"list-style:none;float:left;width:20%;text-align:right;\">" + util.math.multi(obj.num, obj.price) + "</li></ul>");
                            }
                            LODOP.ADD_PRINT_LINE(initContentTop + lineHeight * (5 + projectTypeNum), -7, initContentTop + lineHeight * (5 + projectTypeNum), 377, 4, 0);
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (5 + projectTypeNum + 1), 0, "100%", "100%", "<div style=\"font-size:11px;\">" + util.StringFormat(this.$t('collectmoney.print.totalProjectNumber'), projectTypeNum, projectNumber) + "</div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (5 + projectTypeNum + 2), 0, "100%", "100%", "<div style=\"font-size:14px;text-align:right;\">" + this.$t('collectmoney.print.totalMoney') + "<span style=\"font-size:14px;font-weight:bold;\">" + this.shopCartPrice + "</span></div>");
                            let printPayRecordNum = 0;
                            for (let i = 0; i < para.payRecords.length; i++) {
                                let payRecord = para.payRecords[i];
                                if (1 == payRecord.payWay) {
                                    //现金
                                    printPayRecordNum++;
                                    LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (5 + projectTypeNum + 2 + printPayRecordNum), 0, "100%", "100%", "<div style=\"font-size:11px;text-align:right;\">" + this.$t('collectmoney.print.cashPay') + payRecord.payMoney + "</div>");
                                }
                                if (2 == payRecord.payWay) {
                                    //信用卡
                                    printPayRecordNum++;
                                    LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (5 + projectTypeNum + 2 + printPayRecordNum), 0, "100%", "100%", "<div style=\"font-size:11px;text-align:right;\">" + this.$t('collectmoney.print.creditPay') + payRecord.payMoney + "</div>");
                                }
                                if (3 == payRecord.payWay) {
                                    //礼卡：礼卡卡号：
                                    printPayRecordNum++;
                                    LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (5 + projectTypeNum + 2 + printPayRecordNum), 0, "100%", "100%", "<div style=\"font-size:11px;text-align:right;\">" + this.$t('collectmoney.print.giftPay') + payRecord.payMoney + "</div>");
                                }
                            }
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (5 + projectTypeNum + 2 + printPayRecordNum + 1), 0, "100%", "100%", "<div style=\"height:1px;border-top:1px dashed #000;\"></div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (5 + projectTypeNum + 2 + printPayRecordNum + 2), 0, "100%", "100%", "<div style=\"font-size:11px;text-align:center;\">" + this.$t('collectmoney.print.shopPhone') + res.data.shop.phone + "</div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (5 + projectTypeNum + 2 + printPayRecordNum + 3), 0, "100%", "100%", "<div style=\"font-size:11px;text-align:left;\">" + res.data.shop.address + "</div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (5 + projectTypeNum + 2 + printPayRecordNum + 4), 0, "100%", "100%", "<div style=\"height:1px;border-top:1px dashed #000;\"></div>");
                            LODOP.ADD_PRINT_HTM(initContentTop + lineHeight * (5 + projectTypeNum + 2 + printPayRecordNum + 5), 0, "100%", "100%", "<div style=\"font-size:11px;text-align:center;\">" + res.data.shop.welcomeTip + "</div>");
                            LODOP.PRINT();
                        } else {
                            this.$message({
                                message: "获取打印控件失败！请检查是否打印控件服务没开启",
                                type: 'error'
                            });
                        }
                    } catch (err) {
                        console.log(err);
                    } finally {
                        this.showMainPage();
                    }
                }
            });

        }
    }
}
</script>

<style lang="scss" scoped>
@import '~scss_vars';

.main {
    background-color: #012547;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    font-family: Helvetica, Tahoma, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    overflow: hidden;
    display: grid;
    grid-template-columns: 2fr 1fr;
    color: #ffffff;
}

.left {
    display: grid;
    grid-auto-rows: 60px auto 50px;
}

.projectname {
    background-color: #014171;
    font-size: 32px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.project {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 1fr 1fr 1fr 1fr;
    grid-gap: 1px;
}

.projectitem {
    background-color: #409EFF;
    //border: 1px solid #ddd;
    font-size: 22px;
    justify-content: center;
    align-items: center;
    display: flex;
    cursor: pointer;
}

.projectbar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: #014171;
    grid-gap: 1px;
    border-top: 1px solid #ddd;
}

.button {
    font-size: 22px;
    width: 100%;
    height: 100%;
    border: 0px;
    color: #ffffff;
}

.right {
    display: grid;
    grid-auto-rows: 60px auto 100px;
}

.checkoutname {
    background-color: #014171;
    font-size: 32px;
    justify-content: center;
    align-items: center;
    display: flex;
    border-left: 1px solid #ddd;
}

.checkoutbar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    background-color: #014171;
    //grid-gap: 1px;
}

.checkoutbar div {
    font-size: 22px;
    justify-content: center;
    align-items: center;
    display: flex;
    border: 1px solid #ddd;
}
</style>
